<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { ref, watchEffect } from "vue"
//watchEffect 用来自动收集响应式数据的依赖(回调函数中所依赖的数据)
//语法: watchEffect(回调函数) =>返回值:(WatchStopHandle)
//watchEffect回调函数会被立即执行一次,并且在执行过程中会收集依赖
//其实只有收集的依赖发生变化时,watchEffect回调函数才会再次执行

//watchEffect的返回值函数-->WatchStopHandle用来停止监听
//WatchStopHandle停止的是整个watchEffect的监听 不能用于停止单独某个依赖的监听

export default {
    name: "Home",
    setup() {
        let name = ref("你好");
        let age = ref(18);

        let stopWatch = watchEffect(()=>{
            console.log("name==>",name.value);
            console.log("age==>",age.value);
        })

        function changeName(){
            name.value += "世界"
        }

        function changeAge(){
            age.value++;
            //如果age.value大于30的时候 停止监听
            if(age.value > 20){
                stopWatch();
            }
        }

        return {
            name,
            age,
            changeName,
            changeAge
        }
    },
}
</script>

<style scoped>

</style>